<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>actionPrompt - Example of Bubbling technique</title>
<meta name='author' content='Caridy Patino (caridy at gmail.com)' />
<!-- Reset and Fonts -->
<link rel="stylesheet" type="text/css" href="../assets/example.css">
<!-- YUI Basement Style -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.2.2/build/button/assets/button.css">
<!-- Dependency source files -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/utilities/utilities.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/button/button-beta-min.js"></script>
<script type="text/javascript" src='../../../yui-cms/build/bubbling/bubbling.js'></script>
<script type="text/javascript">

    // this method is not important, his only function is the creation of the YUI buttons and the adition of the correct className to every button...
	YAHOO.example.init = function () {
		// "contentready" event handler for the "pushbuttonsfrommarkup" <fieldset>
		YAHOO.util.Event.onContentReady("pushbuttonsfrommarkup", function () {
			// Create Buttons using existing <input> elements as a data source
			var oPushButton1 = new YAHOO.widget.Button("pushbutton1src", { id:"pushbutton1" });
			oPushButton1.addClass ('actionGlobalBahavior');
		
			// Create Buttons using the YUI Button markup
			var oPushButton2 = new YAHOO.widget.Button("pushbutton2");
		});
		
		// Create Buttons without using existing markup
		var oPushButton3 = new YAHOO.widget.Button({ label:"Button From JavaScript", id:"pushbutton3", container:"pushbuttonsfromjavascript" });
		oPushButton3.addClass ('actionGlobalBahavior');
	}();

    // defining the globla behavior... (in this case a navigation behavior)
    YAHOO.CMS.Bubble.addDefaultAction('actionGlobalBahavior', 
	    function (layer, args) {
	      alert ('Behavior {actionGlobalBahavior}');
	    }
	);

</script>
</head>
<body id="cms-body">
<div id="doc">
	
	<div class="path">
	  <a href="http://bubbling.comarq.com/" target="_top">Bubbling Library</a> &gt; <a href="http://bubbling.comarq.com/eng/examples" target="_top">Examples</a>
	</div>
	
	<h1>Examples of Using the Bubbling Technique: Simple Actions</h1>
	<p>In this example you will see how to define a global behavior called &quot;actionGlobalBahavior&quot;, and every link or button in this page that have a className equal to &quot;actionGlobalBahavior&quot; will fire this behavior, even when the element is created form JavaScript or by another component in the page, even before or after the definition of the global behavior. </p>
	<fieldset id="pushbuttonsfrommarkup">
		<legend>From Markup</legend>

		<a href="#" class="actionGlobalBahavior">Link with behavior</a>
		
		<input type="button" id="pushbutton1src" name="button1" value="Button From Input">
		
		<span id="pushbutton2" class="yuibutton actionGlobalBahavior"><span class="first-child"><button type="button" name="button2">Button From YUI markup</button></span></span>

	</fieldset>
	
	<fieldset id="pushbuttonsfromjavascript">
		<legend>From JavaScript</legend>
		<a href="#">Link without behavior</a>
	</fieldset>

</div>



</body>
</html>